<template>
	<view id="secret">
		<Header txt="密钥" v-if="baidu"></Header>
		<HeaderB txt="密钥" v-if="!baidu"></HeaderB>
		<view class="sercie">
			<image class="icon" src="../../static/usercenter/key.png" mode="aspectFit"></image>
			<text class="text">:</text>
			<text class="input">{{secretd}}</text>
		</view>
		
		<view class="btn">
			<button type="default" class="btn-left" @click="getUpdateSecret">更换</button>
			<button type="default" class="btn-right" @click="copy">复制</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				secretd:'',
				baidu:true
			};
		},
		onShow() {
			this.getUserInfo()
			// #ifdef MP-BAIDU
			this.baidu=false
			// #endif
		},
		computed: {
		    userInfo() {
		      return this.$store.state.userInfo;
		    }
		},
		methods:{
			copy(){
				console.log(this.secretd)
				if (this.secretd != "") {
					uni.setClipboardData({
						data:this.secretd,//要被复制的内容
					    success:()=>{//复制成功的回调函数
					    uni.showToast({//提示
					        title:"复制成功"
					    })
					    }
					});
				}		
			},
			getUserInfo() {
				      let that = this;
				      this.$store
				        .dispatch("GetInfo")
				        .then((response) => {
							this.secretd=response.secret
				        })
				        .catch(() => {});
			},
			// 更换密匙
			getUpdateSecret(){
				this.$store
				  .dispatch("UpdateSecret")
				  .then((response) => {
					  if(response.data.code==0){
						  this.getUserInfo()
					  }
				  })
				  .catch(() => {});
			}
		}
	}
</script>

<style lang="less">
	#secret{
		overflow: hidden;
		.sercie{
			    background-color: #486ef5;
			    height: 125rpx;
			    line-height: 125rpx;
			    background-image: url(), url();
			    background-repeat: no-repeat, no-repeat;
			    background-size: 5%;
			    background-position: 4% 27%, 95% 83%;
				text-align: center;
				image{
					width: 38rpx;
					height: 24rpx;
					vertical-align: middle;
					position: relative;
					z-index: 1;
				}
				.text{
					color: rgb(255, 255, 255);
					padding: 0px 10rpx;
				}
				.input{
					display: inline-block;
					border: none;
					resize: none;
					outline: none;
					color: #ffffff;
					font-size: 24rpx;
					width: 406rpx;
					vertical-align: middle;
					z-index: 1;
				}
		}
		.btn{
			width: 80%;
			margin: 0 auto;
			margin-top: 48rpx;
			button{
				float: left;
				width: 240rpx;
				height: 77rpx;
				line-height: 77rpx;
				color: #486ef5;
				font-size: 24rpx;
				background-color: #fff;
				border: 2rpx solid #486ef5;
			}
			.btn-right{
				float: right;
				color: rgb(255, 255, 255);
				background-color: rgb(72, 110, 245);
			}
		}
		
	}
</style>
